<template>
	<view>
		<view class="member-info card" style="background-color: transparent;">
			<u-avatar :src="memberInfo.vxUrl" size="50"></u-avatar>
			<view class="member-nick">
				<text>{{phone}}</text>
				<view class="censorStatus">{{censorStatus == 2 ? '已认证' : '未认证'}}
				</view>
			</view>
		</view>

		<view class="distributionBox  card">
			<view class="leftInfo">
				<text class="title">可提现佣金</text>
				<text class="value">¥{{memberAcountData.balance || 0.00}}</text>
			</view>
			<view class="btn" @click="goSpreadDetail(1)">提现</view>
		</view>

		<view class="distributionBox  card" @click="goSpreadDetail(5)">
			<view class="leftInfo">
				<text class="title">我的分销团队</text>
				<text class="value">{{memberAcountData.numberPromoters || 0}}人</text>
			</view>
			<image class="imgGroup" src="https://qykh.shopec.com.cn/image-server/dz/fx_group.png" mode=""></image>
		</view>

		<view class="card" style="margin: 20upx 36upx 0;padding: 0 39upx;">
			<mine-item name="收益明细" imgSrc="/pagesD/static/pay/fx_detail.png" @itemClick="goSpreadDetail(2)">
			</mine-item>
			<mine-item name="提现记录" imgSrc="/pagesD/static/pay/fx_record.png" @itemClick="goSpreadDetail(3)">
			</mine-item>
		</view>
		<view class="invite" @click="goSpreadDetail(4)">
			<view class="title">
				邀请好友下单 立获返佣
			</view>
			<view class="subTitle">
				分享小程序搭建分销团队
			</view>
		</view>


	</view>
</template>

<script>
	import {
		memberAccount
	} from '@/api/marketing-api.js'
	import mineItem from '@/components/mine/mine-item.vue';
	export default {
		components: {
			mineItem
		},
		data() {
			return {
				memberAcountData: {}
			}
		},
		computed: {
			censorStatus() {
				return this.$store.state.user.censorStatus;
			},
			phone() {
				return this.$store.state.user.userInfo.contactPhone;
			}
		},
		onLoad() {
			uni.$on('refreshWithdraw',()=>{
				this.getMemberAccount();
			})
			this.getMemberAccount();
		},
		methods: {

			//获取用户累积收益及可提现金额
			getMemberAccount() {
				memberAccount().then(res => {
					this.memberAcountData = res.data;
				})
			},

			// 推广 | 收益 | 提现
			goSpreadDetail(type) {

				switch (type) {
					case 1: //提现
						uni.navigateTo({
							url: '/pagesD/withdraw/withdraw'
						})
						break
					case 2: //收益明细
						uni.navigateTo({
							url: '/pagesD/withdraw/myincomedetail'
						})
						break
					case 3: //提现记录
						uni.navigateTo({
							url: '/pagesD/withdraw/withdrawrecord'
						})
						break
					case 4: //邀请好友
						uni.navigateTo({
							url: '/pagesD/withdraw/inviteearnmoney'
						})
						break
					case 5: //分销团队
						uni.navigateTo({
							url: '/pagesD/withdraw/distribution-team?teamNum=' + this.memberAcountData.numberPromoters
						})
						break

				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.member-info {
		margin: 10rpx 36rpx 0;
		padding: 20rpx 40rpx;
		display: flex;
		align-items: center;

		.member-nick {
			margin-left: 22rpx;
			display: flex;
			flex-direction: column;
			font-size: 32rpx;
			font-weight: bold;
			color: #131313;

			.censorStatus {
				margin-top: 10rpx;
				height: 50rpx;
				width: 110rpx;
				line-height: 50rpx;
				text-align: center;
				background: #3699FF;
				border-radius: 25rpx;
				color: #fff;
				font-size: 24rpx;
			}

		}
	}

	.distributionBox {
		margin: 20rpx 36rpx 0;
		padding: 30rpx 38rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.leftInfo {
			display: flex;
			flex-direction: column;

			.title {
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
			}

			.value {
				font-size: 30rpx;
				font-weight: 600;
				color: #333333;
			}
		}

		.btn {
			width: 142rpx;
			height: 58rpx;
			line-height: 58rpx;
			text-align: center;
			border: 3rpx solid #1989FA;
			border-radius: 29rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #1989FA;
		}

		.imgGroup {
			width: 128rpx;
			height: 92rpx;
		}
	}

	.invite {
		margin: 20rpx 36rpx 0;
		height: 235rpx;
		background-image: url('https://qykh.shopec.com.cn/image-server/dz/fx_invite.png');
		background-size: 100% 100%;
		padding: 66rpx 54rpx 0;

		.title {
			font-size: 43rpx;
			font-weight: bold;
			color: #FFFFFF;
		}

		.subTitle {
			margin-top: 24rpx;
			font-size: 26rpx;
			color: #FFFFFF;
		}

	}
</style>
